<!DOCTYPE html>
<html>
<head>
<title>鼠标划过360度旋转效果</title>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
    <link rel="stylesheet" type="text/css" href="demo.css" media="all" />
</head>
<body>
<div class="container">   
	<h1 class="title">鼠标划过360度旋转效果</h1>   
    <ul class="ca-menu">
                    <li>
                        <a href="#">
                            <span class="ca-icon">A</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Exceptional Service</h2>
                                <h3 class="ca-sub">Personalized to your needs</h3>
                            </div>
                        </a>                   
                    </li>
                    <li>
                        <a href="#">
                            <span class="ca-icon">I</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Creative Storytelling</h2>
                                <h3 class="ca-sub">Advanced use of technology</h3>
                            </div>
                        </a>                   
                    </li>
                    <li>
                        <a href="#">
                            <span class="ca-icon">C</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Infographical Education</h2>
                                <h3 class="ca-sub">Understanding visually</h3>
                            </div>
                        </a>                    
                    </li>
                    <li>
                        <a href="#">
                            <span class="ca-icon">S</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Sophisticated Team</h2>
                                <h3 class="ca-sub">Professionals in action</h3>
                            </div>
                        </a>  
                    </li>
    </ul>
</div>

</body>
</html>
